<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button class="lowPriority">低优先级</button>
  <button class="userButton">高优按钮</button>
  <script>
    // main.js
    // https://segmentfault.com/q/1010000043339384

    // ------------------------------------------------------
    // event.js
    document.querySelector('.lowPriority').addEventListener('click', () => {
      // 先派发一个 低优先级 的耗时异步任务：请求第三方配置信息
      scheduler.postTask(() => console.log('低优耗时任务：请求第三方配置信息'), {
        priority: 'background',
      });
      // 执行一段耗时的同步代码阻塞主线程：模拟系统初始化
      (() => {
        console.time('init')
        for(let i = 0; i < 10000000000; i++) {}
        console.timeEnd('init')
      })()
    })

    // 在事件注册的位置，我们可以派发 高优先级的 异步任务，来保证 其先于 低优先级任务 被调度执行
    document.querySelector('.userButton').addEventListener('click', () => {
      scheduler.postTask(() => console.log('高优先级任务：用户交互'), {
          priority: 'user-blocking',
      });
    })
  </script>
</body>
</html>